<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Full Page Background Image, Technique #2</title>
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script	>
		$(function(){
		
			var height=$(window).height();
			var width=$(window).width();
			var top=height*1.12*307/915;
			var widhtdiv=width*0.25;	
			var mainheight=parseInt(height/2);			
			$(".principal").css("top",top+"px");
			var fontsizepp= fontpourcentage(width);
			$(".listmenu_2").css("font-size",fontsizepp)
			$(".listmenu_2").css("height",top+"px");
			$(".listmenu_2").css("width",widhtdiv*0.52+"px");
			$(".LogoAndList").css("width",widhtdiv+"px");
			$(".LogoAndList").css("height",top+"px");
			$(".main").css("margin-left",widhtdiv+"px");
			$(".main").css("height",mainheight+"px");
			$(".listemenuUl").css("margin-top",top*0.18+"px");
			var popimage=proposition(width)+"%";
			//$(".logo").attr("width",popimage);
			$(".logo").css("margin-top",top*0.1+"px");
				$(window).resize(function() {
					
			var height=$(window).height();
			var width=$(window).width();
			var top=height*1.12*307/915;
			var widhtdiv=width*0.25;	
			var mainheight=parseInt(height/2);		
			$(".principal").css("top",top+"px");
			var fontsizepp= fontpourcentage(width);
			$(".listmenu_2").css("font-size",fontsizepp)
			$(".listmenu_2").css("height",top+"px");
				$(".listmenu_2").css("width",widhtdiv*0.52+"px");
			$(".LogoAndList").css("width",widhtdiv+"px");
			$(".LogoAndList").css("height",top+"px");
			$(".main").css("margin-left",widhtdiv+"px");
			$(".main").css("height",mainheight+"px");
			var popimage=proposition(width)+"%";
			//$(".logo").attr("width",popimage);
			$(".listemenuUl").css("margin-top",top*0.1+"px");
					
					
					
				});
			
			
		})
				function fontpourcentage(currentpagesizel)
		{
			var currentimagesize_w=parseInt(currentpagesizel/17510*100*10);
			var pourcentage=currentimagesize_w+"%"
			return pourcentage;
					
		}
		function proposition(currentpagesizel)
		{
			var currentimagesize_w=parseInt(currentpagesizel/17510*100*10)*0.60;
			return currentimagesize_w;
		}
		
	</script>
</head>

<body>


<div class="principal">
<img src="images/bilbo.jpg" class="bg" />	
<div class="pusherTop"></div>
<div class="pusherLeft"></div>

<div id="content">


<div class="LogoAndList">
	<div class="listmenu_2">
			<ul class="listemenuUl">
				<li><a href="example-jpg.html">&gt; ACCUEIL</a></li>
				<li><a href="microbraserie.html">&gt; MICROBRASSERIE</a></li>
				<li><a href="lepub.html">&gt; LE PUB</a></li>
				<li><a href="articlespromo.html"><&gt; ARTICLES PROMOS</a></li>
				<li><a href="capsule.html">&gt; CAPSULES VIDÉOS</a></li>
				<li><a href="galerie.html">&gt; GALERIE DE PHOTOS</a></li>
				<li><a href="nousjoindre.html">&gt; POUR NOUS JOINDRE</a></li>
			</ul></div>
<img class="logo" src="images/logo2.png"  width="60%">

</div><!--LogoAndList-->
<div class="main">Contenue à venir.(section Xiaoming)</div><!--main-->

	
	         
</div><!--/content-->
</div><!--/principal-->
</body>
</body>
</html>